<template>
  <div class="list">
    <!-- 面包屑导航 -->
    <Breadcrumb></Breadcrumb>
    <!-- 查询 -->
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="formInline.name" size="small" placeholder="请选择订单编号"></el-input>
          </el-form-item>
          <el-form-item label="汇总时间">
            <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" :header="title"
          name="采购公司汇总清单列表.xlsx">
          <el-button size="small" type="warning">导出</el-button>
        </download-excel>
      </div>
    </div>
    <!-- 表格 -->
    <div class="container">
      <el-table :data="tableData" border style="width: 100%,height:40px" header-row-class-name="active-header" @select="select">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="orderNum" label="汇总单编号" width="220" align="center">
        </el-table-column>
        <el-table-column prop="operator" label="汇总人" width="210" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="time" label="汇总时间" width="210" align="center">
          <template slot-scope="scope">{{ dayjs(scope.row.yudingTime).format('YYYY-MM-DD hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="汇总单总价" width="180" align="center">
        </el-table-column>
        <el-table-column prop="totalPrice" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="handleEdit(scope.$index, scope.row)" size="mini">撤销汇总</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <Pagination :total="total" :pageSize="pageSize" @currentChange="currentChange"></Pagination>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Pagination from '@/components/pagination/Pagination.vue'
export default {
  components: { Pagination },
  data() {
    return {
      // 查询
      formInline: {},
      //表单数据
      tableData: [],
      total: 10,
      pageSize: 1,
      DetailsForm: [],//需要导出的数据 [{},{}]
      json_fields: {//映射字段值
        // "订单编号": 'code',
          //数字处理--
          "汇总订单编号":{
          field:"orderNum",
          callback:value=>{
            return '&nbsp;'+value;
          }
        },
        "汇总人": 'operator',
        "联系电话": 'phone',
        "汇总时间":'time',
        "汇总单总价格":'totalPrice',
      },
      title: '采购公司汇总清单列表',
    }
  },
  methods: {
    dayjs,
    //表格选择事件
    select(selection, row) {
      let arr = []
      selection.forEach(ele => {
        arr.push(ele.id)
      });
      
      this.ids = arr
      //存储当前的勾选行的数据信息------ 
      this.DetailsForm = selection;
    },
    // 获取分页页码
    currentChange(page) {
      this.orderList(page)
    },
    // 获取订单列表
    async collect(page) {
      let res = await this.$api.collect({ page })
<<<<<<< HEAD
      //console.log('汇总订单-----', res);
=======
      ////console.log('汇总订单-----', res);
>>>>>>> e558facf022688ce3d835b65714b1b14b7cb08fa
      if (res.data.status == 200) {
        this.tableData = res.data.data
        this.total = res.data.total
        this.pageSize = res.data.pagaSize
      } else {
        this.tableData = []
        this.total = 0
        this.pageSize = 1
      }
    },
    //撤销操作
    handleEdit(index, row) {
      this.$confirm('确认撤销汇总?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.cancel({ id: row.id })
          .then(res => {
<<<<<<< HEAD
            //console.log('撤销汇总',res.data)
=======
            ////console.log('撤销汇总',res.data)
>>>>>>> e558facf022688ce3d835b65714b1b14b7cb08fa
            if (res.data.status == 200) {
              this.$message({
                message: '撤销成功',
                type: 'success'
              });
              this.collect()
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  },
  created() {
    this.collect(1)
  }
}
</script> 

<style lang="less" scoped>
.header {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;

  .el-form-item {
    margin-bottom: 14px;
  }

  .group {
    padding: 8px;
    border: 1px solid #eee;
  }
}

.container {
  /deep/.active-header {
    color: black;
  }
}
</style>
